<template>
  <!-- 购物车 -->
  <div class="shoppingcart">
    <el-popover placement="left-end" title="我的购物车" width="200" trigger="click">
      <div class="shoppingcartContent" v-if="islogin">
        <el-table
          :data="goodsList"
          stripe
          height="350"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          empty-text="购物车空空如也"
        >
          <el-table-column  label="商品名称" width="150">
             <template #default="{ row }">
              <span>{{row.product.goodsName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" width="120">
            <template #default="{ row }">
              <el-image :src="row.product.goodsThumbnailImg"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="商品数量" width="140">
            <template #default="{ row }">
              <el-input-number
                v-model="row.count"
                :min="1"
                :max="999"
                size="mini"
                @change="updateCount(row)"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column  label="商品价格" width="110">
            <template #default="{ row }">
              <span>￥{{row.product.goodsPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteProduct(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="settlement">
          <el-button type="primary" @click="goToShoppingCart()">详情</el-button>
          <p class="totalPrice">总价格为：￥{{ totalPrice }}</p>
        </div>
      </div>
      <div class="login" v-if="!islogin">
        <el-button type="success" @click="goToLogin()" >请登录</el-button>
      </div>

      <template v-slot:reference>
        <el-button
          type="success"
          icon="el-icon-shopping-cart-2"
          @click="checkLoging()"
          >我的购物车</el-button
        >
      </template>
    </el-popover>
  </div>
</template>

<script>
import { getUserShoppingCart } from "@/apis/getData.js";
import { updateProductCountFromShopcart } from "@/apis/updateData.js";
import { deleteProductFromShopCart } from "@/apis/deleteData.js";
import { onMounted, ref, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "ShoppingCart",

  setup() {
    const goodsList = ref([]);
    const islogin = ref(false);
    const store = useStore(); // 使用useStore方法
    const uid = ref(0);
    const router = useRouter();
    onMounted(() => {
      
    });
    function getShopCartData() {
      let params = new FormData();
      params.append("uid", uid.value);
      getUserShoppingCart(params).then((res) => {
        goodsList.value = res.data.data;
      });
    }

    const totalPrice = computed(() => {
      let result = 0;
      if (goodsList.value.length <= 0) {
        return 0;
      }
      goodsList.value.forEach((goods) => {
        result = result + goods.product.goodsPrice * goods.count;
      });
      return result;
    });

    function checkLoging() {
      if (store.getters.getUser == null) {
        islogin.value = false;
      } else {
        uid.value = store.getters.getUser.uid;
        getShopCartData();
        islogin.value = true;
      }
    }

    function updateCount(row) {
      //  更新商品数量到数据库
      let params = new FormData();
      params.append("uid", uid.value);
      params.append("gid", row.gid);
      params.append("count", row.count);
      updateProductCountFromShopcart(params).then((res) => {
        if (res.data.data > 0) {
          console.log(res.data.message);
        } else {
          console.log("更新商品数量失败！");
        }
      });
    }

    function deleteProduct(scope) {
      let params = new FormData();
      params.append("uid", uid.value);
      params.append("gid", scope.row.gid);      
      deleteProductFromShopCart(params).then((res) => {
        if (res.data.data > 0) {
          goodsList.value.splice(scope.$index,1);
          console.log(res.data.message);
        } else {
          console.log("删除商品失败！");
        }
      });
    }
    function goToShoppingCart(){
       router.push("/ShoppingCart");
    }
    function goToLogin(){
      router.push("/login");
    }

    return {
      goodsList,
      islogin,
      totalPrice,
      checkLoging,
      deleteProduct,
      updateCount,
      goToShoppingCart,
      goToLogin,
    };
  },

  methods: {
    
  },
};
</script>

<style scoped>
.shoppingcart {
  position: fixed;
  right: 60px;
  bottom: 10%;
  transform: translate(0%, -50%);
  z-index: 1000;
}
.settlement {
  display: flex;
  justify-content:space-between;
  padding-top: 10px;
}

.settlement .totalPrice {
  display: flex;
  align-items: center;
  padding-right: 20px;
}
</style>
